<template>
<div class="login-bg" v-if="!defaultLogin">
    <p class="hi">您好，欢迎使用</p>
    <p class="title">
      瑞天-移动办贷管理平台
    </p>
    <div class="myGroup">
      <div class="myGroup-item">
        <label >账号</label>
        <input placeholder="请输入账号" v-model="account" />
      </div>
      <div class="myGroup-item">
        <label >密码</label>
        <input placeholder="请输入密码" v-model="password" type="password" autocomplete="new-password" />
      </div>
      <div class="myGroup-item">
        <label >角色</label>
        <van-field readonly clickable label="" :value="userRole" placeholder="请选择" @click="showPicker = true"/>
      </div>

      <div class="myGroup-item" v-show="captchaSwitch">
        <label  style="float:left;">验证码</label>
        <input type="text" v-model="code"  maxlength="4"  style="width:60%;float:left; height:40px;  margin-top: 0px;vertical-align:middle"     autocomplete="off"  placeholder="请输入验证码"  />
      <img id="img"    @click="getCode()"   style=" width:40%;float:right;  height:45px; margin-top: -42px;vertical-align:middle" >

      </div>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
      </van-popup>
  </div>
    <button class="myBtn"  @click="btnClick">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
</div>
</template>
<script>
import Vue from 'vue'
import { XInput, Group, XButton } from "vux";

export default {
  name: "homeEdit",
  components: {
    XInput,
    Group,
    XButton
  },
  data() {
    return {
      account: null,
      password: null,
      userRole: null,  //用户角色
      code: null,
      captchaSwitch:false,
      showPicker: false,
      columns: ['客户经理', '客户'],
      defaultLogin: false,//是否默认登录
    };
  },
  created(){
    this.queryCaptchaSwitch()
    this.defaultLogin = this.$route.query.defaultLogin;
    if(this.defaultLogin){ //如果默认登录为true就直接登录跳转
      this.account = this.$route.query.account ? this.$route.query.account:'wxBank';
      this.password = this.$route.query.password ? this.$route.query.password:'1';
      this.userRole = this.$route.query.userRole ? this.$route.query.userRole:'客户';
    }
  },
  methods: {



    getCode() {
      if(!this.captchaSwitch)return ;
      var xhr = new XMLHttpRequest();
      xhr.open('post',  this.__ctx +"/org/login/getCode",true);
      xhr.responseType = "blob";
      xhr.setRequestHeader("Auth", "captcha");
      var img = document.getElementById("img");
      xhr.onload = function() {
        if (this.status == 200) {
          var blob = this.response;

          img.onload = function () {
            //图片加载完成释放资源
            window.URL.revokeObjectURL(img.src);
          };
          img.src = window.URL.createObjectURL(blob);
        }
      }
      xhr.send()
    },



    queryCaptchaSwitch() {
      this.baseService.postForm(this.__ctx+'/org/login/queryCaptchaSwitch').then((result) => {
        if (result.data.length>1) {
          this.captchaSwitch=result.data[0];
          this.getCode();
        }
      })
    },
    onConfirm(value){
      this.userRole = value;
      this.showPicker = false;
    },


    btnnClick () {
      this.$router.replace("/home");
    },
    btnClick() {
      if (!this.account && !this.password) {
        return this.$vux.toast.show({
          type: "warn",
          text: "请填写登录信息！"
        });
      }
      console.log(this.__ctx)
      let defer = this.baseService.postForm(this.__ctx + "/org/login/valid", {
        account: this.account,
        password: this.password,
        captcha:this.code
      });
      defer.then(data => {
        if (data.isOk) {
       	  if(data.data){
       		this.abJwtSetting.setHeader(data.data);
       	  }
          let _this = this;
          localStorage.setItem("userRole", _this.userRole);
          if(_this.defaultLogin){  //默认自动登录
            if( _this.$route.query.redirect && _this.$route.query.redirect !=''){  //历史路由
              _this.getSystemColor();
              let redirectURL = _this.$route.query.redirect;
              _this.$router.replace({path: redirectURL});
              return;
            }
            if(_this.userRole == '客户经理'){
              console.log('123')
              _this.$router.replace("/bpm/start");
              // _this.$router.replace("/loanPage/productDetail");

            }else{
              // _this.$router.push("/loanPage/newHome");
              // _this.$router.replace("/loanPage/bankEntrance");
              _this.$router.replace("/bpm/start");
              

            }
          }else{
            this.$vux.toast.show({
              text: "登录成功",
              onHide() {
                if(_this.userRole == '客户经理'){
                  _this.$router.push("/bpm/start");
                }else{
                  // _this.$router.push("/loanPage/newHome");
                  _this.$router.push("/bpm/start");
                }
              }
            });
          }
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
          this.getCode();
          this.code='';
        }
      });
    },
    // 获取色系
    getSystemColor() {
      let defer = this.baseService.postForm(this.__ctx+"/plugin/mobileHome/getSystemColor");
      defer.then(res => {
        if (res.isOk) {
						// document.querySelector("html").setAttribute("class", "orangeSeries");  //橙色系
						// document.querySelector("html").setAttribute("class", "blueSeries");  //蓝色系
						document.querySelector("html").setAttribute("class", res.data);
            localStorage.setItem("systemColor", res.data);
            this.systemColor = localStorage.getItem("systemColor");
					}
      });
    },
  }
};
</script>

<style scoped lang="less">
.login-bg {
  // background: -webkit-linear-gradient(135deg, #55e6c1, #1b9cfc);
  // background: linear-gradient(135deg, #55e6c1, #1b9cfc);
  background-image:url("../../assets/login-bg.png");
  background-size: 100% 100%;
  background-color: #e1e9fa;
  height: 100vh;
  .hi{
    padding-top: 28%;
    font-size: 2.0rem;
    color: rgb(29, 33, 41);
    width: 80%;
    margin: 0 auto;
  }
  .title {
    width: 80%;
    margin: 0 auto;
    font-size: 2.4rem;
    // text-align: center;
    color: rgb(29, 33, 41);
    // padding-top: 35%;
    margin-bottom: 35px;
    font-weight: 500;
    // text-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
  }
  .myGroup {
    width: 84%;
    margin: 0 auto;
    .myGroup-item {
      // border: 1px solid rgb(78, 89, 105);
      background: rgb(247, 248, 250);
      border-radius: 20px;
      height: 42px;
      position: relative;
      line-height: 42px;
      margin-bottom: 20px;
      label {
        color: rgb(78, 89, 105);
        font-size: 1.3em;
        margin-left: 15px;
        float: left;
      }
      input , /deep/.van-cell{
        border: 0;
        outline: 0;
        -webkit-appearance: none;
        background-color: transparent;
        font-size: inherit;
        height: calc(~"100% - 2px");
        vertical-align: top;
        margin-left: 15px;
        color: rgb(29, 33, 41);
        font-size: 1.2em;
        width: calc(~"100% - 85px");
        float: left;
        padding: 0;
        line-height: 42px;

        .van-field__control{
          color: rgb(29, 33, 41);
          input::placeholder{
            color: rgba(29, 33, 41, 0.3)!important;
          }
        }
        &::placeholder{
          color: rgba(29, 33, 41, 0.3);
        }
      }
    }
  }
}
.myBtn {
  margin-top: 3em;
  width: 84%;
  touch-action: none;
  border-radius: 20px;
  background-color: rgb(78, 89, 105);
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  line-height: 2.33333333;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  border: none;
  box-shadow: 0 2px 16px 0 rgba(78, 89, 105, 0.5);
}
</style>
